
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>typeahead.js – examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="http://twitter.com/favicons/favicon.ico">

    <link rel="stylesheet" href="examples.css">
</head>
<body>
<div class="container" >
    <h1 class="title">examples</h1>



    <div class="example" id="the-basics">
        <h2 class="example-name">基础</h2>
        <p class="example-description">
           默认只有一组数据，进行筛选
        </p>

        <div class="demo">
            <input class="typeahead" type="text" placeholder="请输入">
        </div>


    </div>



    <div class="example" id="prefetch">
        <h2 class="example-name">预处理</h2>

        <div class="demo">
            <input class="typeahead" type="text" placeholder="Countries">
        </div>


    </div>

    <div class="example" id="remote">
        <h2 class="example-name">远程获取数据</h2>


        <div class="demo">
            <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
        </div>


    </div>

    <div class="example" id="custom-templates">
        <h2 class="example-name">使用vue.js,Handlebars,ejs模板</h2>
        <p class="example-description">
        </p>

        <div class="demo">
            <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
        </div>


    </div>

    <div class="example" id="default-suggestions">
        <h2 class="example-name">对数据处理后显示</h2>
        <p class="example-description">

        </p>

        <div class="demo">
            <input class="typeahead" type="text" placeholder="NFL Teams">
        </div>


    </div>

    <div class="example" id="multiple-datasets">
        <h2 class="example-name">多个数据源</h2>

        <div class="demo">
            <input class="typeahead" type="text" placeholder="NBA and NHL teams">
        </div>


    </div>

    <div class="example" id="scrollable-dropdown-menu" style="margin-bottom: 200px">
        <h2 class="example-name">自定义下拉滑动选择（自己写样式）</h2>

        <div class="demo">
            <input class="typeahead" type="text" placeholder="Countries">
        </div>


    </div>

    <p></p><p></p>
    <p></p><p></p><p></p>
    <p></p><p></p><p></p>
    <p></p><p></p><p></p>
    <p></p><p></p><p></p>
    <p></p><p></p><p></p>
    <p></p>



</div>
</div>
<script src="jquery-1.10.2.min.js"></script>
<script src="handlebars.js"></script>
<script src="typeahead.bundle.js"></script>
<script src="examples.js"></script>

</body>
</html>
